<template>
  <div class="continua">
    <div class="content">
      <h3>我是父组件</h3>
      <p>{{ todos }}</p>
      <p>taskList:{{ todos.taskList }}</p>
      <p>sum:{{ todos.sum }}</p>
      <button @click="todos.addTaskList(todos.taskList.length+1)">增加元素</button>
    </div>
  </div>
</template>

<script setup>
import useTodosStore from "@/components/06Pinia/todos.js";

const todos = useTodosStore();
</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
